<template>
	<view class="home">
		<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
		<view class="banner">
			<swiper circular indicator-dots>
				<!-- v-for循环遍历数组 -->
				<swiper-item v-for="item in bannerList">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="info-list">
			<uni-list>
				<uni-list-item direction="row" v-for="item in (infoDataPage?.result || [])" :key="item.id"
					:title="item.title" :note="item.author + ' '+ formatTime(item.updateTime)"
					@click="goToDetailPage(item.id)" clickable="true">
					<template v-slot:header>
						<image class="image-1" :src="item.avatar" mode="aspectFill"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { InfoDataPage } from '@/entity/home/InfoDataPage';
	import { queryBannerData } from '@/api/banner/BannerDataController';
	import { queryInfoPageCondition } from '@/api/info/InfoDataController';
	import { InfoDataQueryCondition } from '@/entity/query/InfoDataQueryCondition';
	import {formatTime} from '@/utils/formatUtils'

	const statusLoadMore = ref('more');
	const bannerList = ref<string[]>([]);
	const infoDataPage = ref<InfoDataPage|null>(null);
	const loadBannerData = async () : Promise<string[]> => {
		// 调用API获取HomeBannerPage数据
		return await queryBannerData();
	};
	
	const loadInfoData = async (pageNo : number, pageSize : number) : Promise<InfoDataPage> => {
		// 调用API获取InfoDataPage数据
		const condition = new InfoDataQueryCondition();
		condition.setPageNo(pageNo);
		condition.setPageSize(pageSize);
		return await queryInfoPageCondition(condition);
	};
	
	const goToDetailPage = (id : string) => {
		console.log("即将跳转，参数: " + id)
		uni.navigateTo({
			url: `/pages/info-detail/info-detail?id=${id}`
		})
	};

	// 初始化数据
	onMounted(async () => {
		statusLoadMore.value = 'loading';
		try {
			bannerList.value = await loadBannerData();
			infoDataPage.value = await loadInfoData(1,4);
		} catch (error) {
			console.error('Failed to load banner data', error);
			statusLoadMore.value = 'nomore';
		}
	});
</script>


<style lang="scss">
	.home {
		swiper {
			width: 750rpx;
			height: 470rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.image-1 {
			flex-shrink: 0;
			margin-right: 10px;
			width: 125px;
			height: 75px;
			border-radius: 6px;
			overflow: hidden;
			border: 1px #f5f5f5 solid;
		}
	}
</style>